<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/WorkspaceTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="top">
        
    </ui:define>

    <ui:define name="left">
        
    </ui:define>

    <ui:define name="right">
        
    </ui:define>

    <ui:define name="content">
        <style>
            .ui-datatable table {
                border-collapse: collapse;
                width: 100%;
                border-color: grey;
            }
            .ui-datatable table td{
                padding: 7px 10px 4px 4px;
                width: 60px;
            }
            .ui-datatable .ui-datatable-header, .ui-datatable .ui-datatable-footer {
                text-align: center;
                padding: 4px 10px 4px 160px;
            }
            .ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
                width: 60px;
            }
        </style>
        <h:form id="sopInfoForm">
            <p:panel header="Sales Operation Planning Basic Information">
                <p:messages showDetail="true"/>
                <h:panelGrid columns="4">
                    <h:outputLabel style="font-weight: bold" value="Date Created: "/>
                    <h:outputText value="#{mrpSopEditManagerBean.selectedSOP.formattedDay}"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>

                    <h:outputLabel style="font-weight: bold" value="Personal: "/>
                    <h:outputLabel value="#{mrpSopEditManagerBean.selectedSOP.staff.fullName}"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>

                    <h:outputLabel style="font-weight: bold" value="Period to plan "/>
                    <h:outputText value="#{mrpSopEditManagerBean.selectedSOP.SOPPeriod}"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                </h:panelGrid>
                <p:commandButton value="Save" ajax="false" action="#{mrpSopEditManagerBean.confirmSOP}"/>
                <p:ajaxStatus style="width: 16px;height: 16px;">
                    <f:facet name="start">
                        <h:graphicImage value="./../images/ajaxloading.gif"/>
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value=""/>
                    </f:facet>
                </p:ajaxStatus>
            </p:panel>
        </h:form>
        <br/>
        <br/>
        <h:form id="sopDetailForm">
            <p:messages showDetail="true"/>
            <p:panel header="Options">
                <p:commandButton value="Calculate" ajax="true" update="sopDetailForm" actionListener="#{mrpSopEditManagerBean.calculateSOP}"/>
<!--                <p:commandButton value="Get the latest Sales Forecast" ajax="true" update="sopDetailForm" actionListener="{mrpSopEditManagerBean.refreshToLatestSF}"/>-->
            </p:panel>
            <div style="border:1px solid gray;width:700px;overflow-y:hidden;overflow-x:scroll;">
                <div class="ui-datatable ui-widget">
                    <table border="1" summary="for all products">
                        <caption>
                            <div class="ui-datatable-header ui-widget-header ui-corner-tl ui-corner-tr">
                                Sales Operation Planning Table
                            </div>
                        </caption>

                        <thead>
                            <tr>
                                <th class="ui-state-default" colspan="4">Sales Operation Planning</th>
                                <c:forEach items="#{mrpSopEditManagerBean.monthLabels}" var="lab">
                                    <th class="ui-state-default"><h:outputText value="#{lab}"/></th>
                                </c:forEach>
                            </tr>
                        </thead>

                        <tbody class="ui-datatable-data">
                            <!--                            sales forecast-->
                            <tr>
                                <th class="ui-state-default" colspan="3" rowspan="5">Sales Forecast</th>
                            </tr>

                            <c:forEach items="#{mrpSopEditManagerBean.counterForProduct}" var="counter">
                                <tr>
                                    <th class="ui-state-default"><h:outputText value="#{mrpSopEditManagerBean.returnProductAlpha(counter)}" /></th>
                                    <td></td>
                                    <c:forEach items="#{mrpSopEditManagerBean.seasonSalesForecasts.get(counter)}" var="item">
                                        <td><h:outputText value="#{item}"/></td>
                                    </c:forEach>
                                </tr>
                            </c:forEach>

                            <!--                            unplanned demand-->
                            <tr>
                                <th class="ui-state-default" colspan="3" rowspan="5">Unplanned Demand</th>
                            </tr>

                            <c:forEach items="#{mrpSopEditManagerBean.counterForProduct}" var="counter">
                                <tr>
                                    <th class="ui-state-default"><h:outputText value="#{mrpSopEditManagerBean.returnProductAlpha(counter)}" /></th>
                                    <td></td>
                                    <c:forEach items="#{mrpSopEditManagerBean.inputtedUplannedDemands.get(counter)}" var="item">
                                        <td><h:outputText value="#{item.l}" rendered="#{!mrpSopEditManagerBean.renderUnplannedDemand(item, counter)}"/>
                                            <p:inputText value="#{item.l}"
                                                         required="true" requiredMessage="Unplanned demand should not be left empty." 
                                                         rendered="#{mrpSopEditManagerBean.renderUnplannedDemand(item, counter)}"/></td>
                                    </c:forEach>
                                </tr>
                            </c:forEach>

                            <!--                            total demand-->
                            <tr>
                                <th class="ui-state-default" colspan="3" rowspan="5">Total Demand</th>
                            </tr>

                            <c:forEach items="#{mrpSopEditManagerBean.counterForProduct}" var="counter">
                                <tr>
                                    <th class="ui-state-default"><h:outputText value="#{mrpSopEditManagerBean.returnProductAlpha(counter)}" /></th>
                                    <td></td>
                                    <c:forEach items="#{mrpSopEditManagerBean.counterForMonth}" var="item">
                                        <td><h:outputText value="#{mrpSopEditManagerBean.returnTotalDemand(item, counter)}"/></td>
                                    </c:forEach>
                                </tr>
                            </c:forEach>

                            <!--                            Production Plan-->
                            <tr>
                                <th class="ui-state-default" colspan="3" rowspan="5">Production Plan</th>
                            </tr>

                            <c:forEach items="#{mrpSopEditManagerBean.counterForProduct}" var="counter">
                                <tr>
                                    <th class="ui-state-default"><h:outputText value="#{mrpSopEditManagerBean.returnProductAlpha(counter)}" /></th>
                                    <td></td>
                                    <c:forEach items="#{mrpSopEditManagerBean.counterForMonth}" var="item">
                                        <td><h:outputText value="#{mrpSopEditManagerBean.returnProducionPlan(item, counter)}"/></td>
                                    </c:forEach>
                                </tr>
                            </c:forEach>

                            <!--                            inputted inventory-->
                            <tr>
                                <th class="ui-state-default" colspan="3" rowspan="5">Inventory</th>
                            </tr>

                            <c:forEach items="#{mrpSopEditManagerBean.counterForProduct}" var="counter">
                                <tr>
                                    <th class="ui-state-default"><h:outputText value="#{mrpSopEditManagerBean.returnProductAlpha(counter)}" /></th>
                                    <td><h:outputText value="#{mrpSopEditManagerBean.previousInventories.get(counter)}"/></td>
                                    <c:forEach items="#{mrpSopEditManagerBean.inputtedInventories.get(counter)}" var="item">
                                        <td><h:outputText value="#{item.l}" rendered="#{!mrpSopEditManagerBean.renderUnplannedDemand(item, counter)}"/>
                                            <p:inputText value="#{item.l}"
                                                         required="true" requiredMessage="Inventory should not be left empty." 
                                                         rendered="#{mrpSopEditManagerBean.renderInventory(item, counter)}"/></td>
                                    </c:forEach>
                                </tr>
                            </c:forEach>

                            <!--                            working days etc-->
                            <tr>
                                <th class="ui-state-default" colspan="4" >Working days</th>
                                <td></td>
                                <c:forEach items="#{mrpSopEditManagerBean.workingDayList}" var="item">
                                    <td><h:outputText value="#{item}"/></td>
                                </c:forEach>
                            </tr>

                            <!--                            Capacity with normal shift-->
                            <tr>
                                <th class="ui-state-default" colspan="4" >Capacity with Normal Shift (hr)</th>
                                <td></td>
                                <c:forEach items="#{mrpSopEditManagerBean.workingDayList}" var="item">
                                    <td><h:outputText value="#{mrpSopEditManagerBean.returnCapacityWithNormalShift(item)}"/></td>
                                </c:forEach>
                            </tr>

                            <!--                            Capacity with overtime shift-->
                            <tr>
                                <th class="ui-state-default" colspan="4" >Capacity with Over time Shift (hr)</th>
                                <td></td>
                                <c:forEach items="#{mrpSopEditManagerBean.workingDayList}" var="item">
                                    <td><h:outputText value="#{mrpSopEditManagerBean.returnCapacityWithOTShift(item)}"/></td>
                                </c:forEach>
                            </tr>

                            <!--                            total planned production hour-->
                            <tr>
                                <th class="ui-state-default" colspan="4" >Total Planned Production hrs</th>
                                <td></td>
                                <c:forEach items="#{mrpSopEditManagerBean.counterForMonth}" var="item">
                                    <td><h:outputText value="#{mrpSopEditManagerBean.returnTotalPlannedProductionHrs(item)}"/></td>
                                </c:forEach>
                            </tr>

                            <!--                            Utilization with normal shift-->
                            <tr>
                                <th class="ui-state-default" colspan="4" >Utilization with Normal Shift</th>
                                <td></td>
                                <c:forEach items="#{mrpSopEditManagerBean.counterForMonth}" var="item">
                                    <td><h:outputText value="#{mrpSopEditManagerBean.returnUtilizationWNormalShift(item)}">
                                            <f:convertNumber type="percent" />
                                        </h:outputText></td>
                                </c:forEach>
                            </tr>

                            <!--                            Utilization with over time shift-->
                            <tr>
                                <th class="ui-state-default" colspan="4" >Utilization with Over time Shift</th>
                                <td></td>
                                <c:forEach items="#{mrpSopEditManagerBean.counterForMonth}" var="item">
                                    <td><h:outputText value="#{mrpSopEditManagerBean.returnUtilizatinWOTShift(item)}">
                                            <f:convertNumber type="percent" />
                                        </h:outputText></td>
                                </c:forEach>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </h:form>
    </ui:define>

    <ui:define name="bottom">
        
    </ui:define>

</ui:composition>
